<template>
  <a-table
      class="scroll-y-table"
      :data-source="userList"
      :scroll="{y: 594}"
      :pagination="{
        total: userTotal,
        showSizeChanger: true,
        onChange: pageChange
      }"
      :loading="loading"
  >
    <a-table-column :width="100" key="Id" title="编号" data-index="Id">
      <template #default="{index}">
        {{ computedIndex(index) }}
      </template>
    </a-table-column>
    <a-table-column key="name" title="用户名" data-index="user_name"/>
    <a-table-column key="account" title="账号" data-index="account"/>
    <a-table-column key="type" title="身份" data-index="type">
      <template #default="{text}">{{ text === '0' ? '学生' : '管理员' }}</template>
    </a-table-column>
    <a-table-column key="operation" title="操作">
      <template #default="{record}">
        <a-button type="link" @click="$emit('update',record)">
          编辑
        </a-button>
      </template>
    </a-table-column>
  </a-table>
</template>

<script lang="ts" setup>
import {reactive, ref, watch} from "vue";
import {delUser, getUserApi} from "@/apis/user";
import {computedNO} from "@/utils";

const loading = ref(false);


// 用户列表
const userList = ref([]);
const page = reactive({
  pageSize: 10,
  pageIndex: 1
})
const userTotal = ref(0);
const getUserList = async () => {
  loading.value = true;
  const {data: {data, index, size, total}} = await getUserApi(page);
  userList.value = data;
  page.pageIndex = index;
  page.pageSize = size;
  userTotal.value = total;
  loading.value = false;
}
getUserList();

const computedIndex = (index: number) => computedNO(index, page.pageIndex, page.pageSize);

const pageChange = (pageIndex: number, pageSize: number) => {
  Object.assign(page, {pageIndex, pageSize});
}
watch(page, getUserList);

defineExpose({getUserList})
</script>
